<template>
  <!-- 表格组件 -->
  <table class="vtable">
    <thead class="header">
    <th v-show="flagId">序号</th>
    <!--      表头          -->
    <th v-for="(cell, colIndex) in header" :key="colIndex">
      <span>{{ cell.name }}</span>
    </th>
    </thead>
    <tbody class="body">
<!--      表格内容      -->
    <tr @click="clickRow(row)" v-for="(row, rowIndex) in data" v-show="show(rowIndex)" :ref="rowIndex"
        :class="{'main-row':(rowIndex===0&&model===1)||(model===2&&row.id!==null)}" :key="rowIndex">
<!--      序号          -->
      <td class="cell" v-show="flagId">{{ rowIndex + 1 }}</td>
<!--      表格其他内容      -->
      <td class="cell" v-for="(value, key, colIndex) in row" :key="colIndex" v-show="check(key)"
          :class="{'down':key==='monthOnMonth'&&value<=0 || key==='monthOnMothAccumulate'&&value<=0 || key==='gyczMonthonmonth1'&&value<=0 || key==='gyczMonthonmonth2'&&value<=0
          ,'up':key==='monthOnMonth'&&value>0 || key==='monthOnMothAccumulate'&&value>0 || key==='gyczMonthonmonth1'&&value>0 || key==='gyczMonthonmonth2'&&value>0}">
        <span>{{ value }}</span>
      </td>
    </tr>
<!--    收缩与查看全部   -->
    <tr v-if="limit && body.length > 10">
      <td colspan="99999" class="query-all" @click="showFlag = !showFlag">
        {{ !showFlag ? '查看更多' : '收起' }}
      </td>
    </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  name: 'v-table',
  data() {
    return {
      showFlag: false
    }
  },
  props: {
    model: {
      type: Number,
      require: true,
      default: 0
    },
    limit: {
      type: Boolean,
      require: false,
      default: true
    },
    flagId: {
      type: Boolean,
      require: false,
      default: false
    },
    header: {
      type: Array,
      require: true,
      default: () => {
        return [
          {value: "col1", name: "第一列"},
          {value: "col2", name: "第二列"},
          {value: "col3", name: "第三列"},
          {value: "col4", name: "第四列"},
          {value: "col5", name: "第五列"}
        ];
      }
    },
    body: {
      type: Array,
      require: true,
      default: () => {
        return [
          {col1: "1", col2: "测试col2测试col2测试col2测试col2测试col2测试col2", col3: "测试col3", col4: "测试col4", col5: "测试col5"},
          {col1: "2", col2: "测试col2", col3: "测试col3", col4: "测试col4", col5: "测试col5"},
          {col1: "3", col2: "测试col2", col3: "测试col3", col4: "测试col4", col5: "测试col5"},
        ];
      }
    },
    sort: {
      type: String,
      require: false,
      default: null
    },
    popUpFrame: {
      type: Boolean,
      require: false,
      default: false
    }
  },
  computed: {
    data() {
      return this.objectSort(this.body, this.sort)
    }
  },
  methods: {
    //点击row事件 -> 弹框
    clickRow(row) {
      if (this.popUpFrame) {
        this.bus.$emit('pop-up-frame-show', row)
      }
    },
    // 检查表格col元素填入table
    check(key) {
      for (let k in this.header) { // eslint-disable-line no-unused-vars
        if (this.header[k].value == key) {
          return true
        }
      }
      return false;
    },
    // 判断隐藏和显示
    show(row) {
      if (this.showFlag) return true
      if (row >= 10) return false
      return true
    },
    // 数组排序
    objectSort(array, sort) {
      if (sort === null || sort === '' || sort === undefined || array.length === 0) return array
      //对象数组进行排序
      const result = array.sort(function (a, b) {
        if (parseInt(a[sort]) > parseInt(b[sort])) {
          return -1;
        } else if (parseInt(a[sort]) < parseInt(b[sort])) {
          return 1;
        } else {
          return 0;
        }
      })
      return result;
    },
  }


}
</script>


<style scoped>
* {
  margin: 0;
  padding: 0;
}

.vtable {
  position: relative;
  margin-top: 10px;
  border-collapse: separate;
  border-spacing: 0;
  border: 2px solid rgba(82, 102, 133, 0.7);
  width: 1050px;
  background-color: rgba(27, 55, 98, 0.5);
  color: aliceblue;
  text-align: left;
  border-radius: 5px;
  margin-left: 20px;
  margin-bottom: 20px;
}

.vtable .header {
  background-color: rgba(27, 56, 100, 0.7) !important;
  backdrop-filter: blur(1px);
  height: 40px;
  color: rgba(159, 203, 228, 1);
  font-size: 16px;
}

.vtable .header th {
  border: 0;
  padding-left: 35px;
}


.vtable .body .cell {
  border-top: 1px solid rgb(82, 102, 133);
  height: 40px;
  padding-left: 35px;
  font-size: 14px;
}

.vtable .body .cell:first-child {
  width: 100px;
}

.vtable .body tr:hover {
  background-color: rgba(7, 80, 148, 0.7);
}

.main-row {
  background-color: rgba(7, 80, 148, 0.8);
}

.main-row td:first-child {
  background: linear-gradient(-75deg, transparent 30%, rgb(18, 116, 211) 30%, rgb(20, 186, 226)) top right;
}


.down {
  color: rgb(16, 221, 255);
}

.up {
  color: rgb(244, 175, 18);
}

.query-all {
  height: 35px;
  width: 1000px;
  border-top: 1px solid rgb(82, 102, 133);
  background-color: rgba(82, 102, 133, 0.5);
  text-align: center;
  user-select: none;
  cursor: pointer;
  font-size: 16px;
}

</style>